import React, { PureComponent } from "react";
import { View, StyleSheet, Dimensions, Animated, TouchableOpacity, Keyboard } from "react-native";
import { Const, DrawerWidth } from "../Storage/Const";
import { Colors } from "../Theme/TTheme";
import { scaleSize } from "../Utils/ToolUtils";

const screenSize = Dimensions.get("screen");
const widowSize = Dimensions.get("window");

export default class CommonDrawer extends PureComponent {
    constructor(props) {
        super(props);
        this.state={
            animateItem: new Animated.Value(0),
            visible: false,
            showMask: false,
            params: {}
        }
    }

    showModalAnimate = (props) => {
        this.setState({visible: true, showMask: true, params:{...props}},()=>{
            Animated.timing(this.state.animateItem, {
                toValue: 1,
                duration: 400,
                delay: 0,
                useNativeDriver: true,
            }).start();
        });
    }

    hideModalAnimate = (endCallback) => {
        Keyboard.dismiss();
        this.setState({
            showMask: false
        });
        Animated.timing(this.state.animateItem, {
            toValue: 0,
            duration: 400,
            delay: 0,
            useNativeDriver: true,
        }).start(()=>{
            this.setState({visible: false},()=>{
                endCallback && endCallback();
            });
        });
    }

    render() {
        const { contentView } = this.props;
        const { visible, showMask } = this.state;
        return visible ? (<View style={[styles.container, showMask ? {} : {backgroundColor:'rgba(0, 0, 0, 0)'}]}>
        <Animated.View style={[styles.animationView,
            {
                transform: [
                    {
                        translateX: this.state.animateItem.interpolate({
                            inputRange: [0, 1],
                            outputRange: [-700, 1]
                        })
                    }
                ]
            }]}>
            {contentView ? React.cloneElement(contentView, this.state.params) : null}
        </Animated.View>
        <TouchableOpacity style={styles.touch} onPress={()=>{this.hideModalAnimate()}}>
        </TouchableOpacity>
    </View>) : null;
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1, 
        backgroundColor:'rgba(0, 0, 0, 0.5)', 
        flexDirection:'row', 
        position:'absolute', 
        height:screenSize.height
    },
    touch:{
        backgroundColor:'transparent', 
        width:(Const.screenWidth - scaleSize(DrawerWidth))
    },
    animationView:{
        width:scaleSize(DrawerWidth), 
        backgroundColor:Colors.white, 
        paddingTop:scaleSize(44), 
        paddingBottom: Math.max(scaleSize(44), scaleSize(44+screenSize.height-widowSize.height))
    }
  });